<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>拖动一张图片到浏览器中</title>
    <style>
        body{
            text-align: center;
        }
        #container {
            border: 1px solid #aaa;
            border-radius: 3px;
            padding: 10px;
            margin: 10px;
            min-height: 400px;
        }
    </style>
</head>
<body>

<h1>拖放API的扩展知识</h1>
<h3>请拖动您的照片到下方方框区域</h3>
<div id="container"></div>

<script>
    var container = document.getElementById('container')
   document.ondragover = function(e){
       e.preventDefault()
   }
   document.ondrop = function(e){
       e.preventDefault()
   }
   container.ondragover = function(e){
       e.preventDefault()
   }
   container.ondrop = function(e){
        var paper = e.dataTransfer.files[0];
        var file = new FileReader();
        file.readAsDataURL(paper)
       file.onload = function(){
            console.log('读取文件完成')
           console.log(file.result)
           var img = new Image();
            img.src =file.result;
            container.appendChild(img)
       }
   }
</script>
</body>
</html>